<template>
 <div  class="footer" :style="{background:bg}" :class="{fixed:fixed}">
  <ul>
    <li @click="activeIndex=index" :class="{active:activeIndex==index}" v-for="(item,index) in  list" :key="item.id">{{ item.name }}</li>
  </ul>
 </div>
</template>
<script>
export default{
    name:'',
    props:{
      list:{
        type:Array,
        default:()=>[]
      },
      bg:String,
      fixed:Boolean
    },
    data () {
        return {
          activeIndex:0
        }
    },
    created () {
    },
    computed:{
    },
    methods:{
    }
}
</script>
<style lang='less'  scoped>

.footer{
  background-color: #ccc;
  ul{
    list-style: none;
    display: flex;
    align-items: center;
    text-align: center;
    li{
      flex:1;
      padding: 10px;
      &.active{
        background-color: red;
      }
    }
  }
  &.fixed{
    position: fixed;
    bottom:0;
    left: 0;
    width:100%;
  }
}

</style>
